

<template>
   <router-view v-slot="{ Component }" v-if="isRouterActive">
        <transition name="fade" mode="out-in" appear>
            <!-- <keep-alive> -->
                <component :is="Component" />
            <!-- </keep-alive> -->
        </transition>
    </router-view>
</template>

<script setup>
    import { ref, reactive, toRefs, onBeforeMount, onMounted, provide,nextTick  } from 'vue'
    import { useRouter, RouterView } from 'vue-router'
    import { debounce } from 'lodash'
    import { controlStore } from '@/stores/control'

    const router = useRouter();
    const controlSto = controlStore();
    const state = reactive({
        transitionName: 'slide-left'
    });
    let resizeDebounce = null;
    const isRouterActive = ref(true)
    provide('reload', () => {
        isRouterActive.value = false
        nextTick(() => {
            isRouterActive.value = true
        })
    })
    onBeforeMount(()=> {
        initDebounce();
    });
    onMounted(() => {
        window.onresize = () => {
            resizeDebounce && resizeDebounce();
        }
        resizeDebounce && resizeDebounce();
    });



    router.beforeEach((to, from) => {
        if (to.meta.index > from.meta.index) {
            state.transitionName = 'slide-left' // 向左滑动
        } else if (to.meta.index < from.meta.index) {
            // 由次级到主级
            state.transitionName = 'slide-right'
        } else {
            state.transitionName = ''   // 同级无过渡效果
        }
        if (to.meta.title) {
            document.title = to.meta.title;
        }
    })


    const initDebounce = () => {
        resizeDebounce = debounce((e) => {
           doResize();
        }, 400);
    };
   
    const doResize = () => {
        let obj = {
            clientWidth: '',
            clientHeight: ''
        };
        obj.clientWidth = document.documentElement.clientWidth;
        obj.clientHeight = document.documentElement.clientHeight;

        controlSto.setClient(obj);

    };
    // document.addEventListener('gesturestart', function (event) {
    //     event.preventDefault()
    // })
</script>

<style lang="scss">
    html, body {
        font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        // -webkit-touch-callout: none;
        // -webkit-user-select: none;
        // -moz-user-select: none;
        // -ms-user-select: none;
    }
    // #app {
    //     // height: 100vh;
    //     height: 100vh;
    //     font-family: 'Avenir', Helvetica, Arial, sans-serif;
    //     -webkit-font-smoothing: antialiased;
    //     -moz-osx-font-smoothing: grayscale;
    //     // text-align: center;
    //     // color: #2c3e50;
    //     color: #333;
    // }

    .router-view{
        position: absolute;
        width: 100vw;
        height: auto;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        -webkit-overflow-scrolling: touch;
    }

    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active{
        height: 100%;
        will-change: transform;
        transition: all 500ms;
        position: absolute;
        backface-visibility: hidden;
    }
    .slide-right-enter{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .van-badge--fixed {
        z-index: 1000;
    }




    .fade-leave-active,
    .fade-enter-active {
        transition: all 0.5s;
    }
    
    /* 可能为enter失效，拆分为 enter-from和enter-to */
    .fade-enter-from {  
        opacity: 0;
        transform: translateX(-30px);
    }
    .fade-enter-to { 
        opacity: 1;
        transform: translateX(0px);
    }
    
    .fade-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
</style>

